<template>
    <div>
        <textarea ref="editor"></textarea>
    </div>
</template>
<script setup lang="ts">
import "codemirror/lib/codemirror.css";
import "codemirror/mode/css/css.js";
import "codemirror/mode/yaml/yaml.js";
import "codemirror/mode/yaml-frontmatter/yaml-frontmatter.js";
import "codemirror/mode/javascript/javascript";
import "codemirror/addon/selection/active-line"; // 代码高亮
import "codemirror/addon/fold/foldgutter.css";
import "codemirror/addon/fold/foldcode";
import "codemirror/addon/fold/brace-fold";
import "codemirror/addon/scroll/simplescrollbars.css";
import "codemirror/addon/scroll/simplescrollbars";
import "codemirror/addon/hint/show-hint";
import "codemirror/addon/hint/javascript-hint";
import "codemirror/addon/hint/anyword-hint";
import "codemirror/addon/hint/css-hint";
import "codemirror/addon/hint/show-hint.css";
import "codemirror/theme/abbott.css"; // 主题
import CodeMirror from "codemirror"

const emit = getCurrentInstance()?.emit

const props = withDefaults(defineProps<{
    modelValue?: string,
    type: string
}>(), {
    modelValue: "",
    type: "yaml"
})

watch(() => props.modelValue, (a) => {
    coder.setValue(a);
}, { deep: true })

const editor = ref<HTMLTextAreaElement>()
const init = () => {
    return CodeMirror.fromTextArea(editor.value as HTMLTextAreaElement, {
        mode: 'yaml',
        lineNumbers: true,
        indentUnit: 2,
        smartIndent: true,
        styleActiveLine: true,
        lineWrapping: true,
        tabSize: 2,
        theme: 'abbott',
        scrollbarStyle: "simple",
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter", "breakpoints"],
    })
}

let coder: CodeMirror.EditorFromTextArea
onMounted(() => {
    console.log(1)
    coder = init()
    coder.on('blur', (a) => {
        if (emit != undefined) {
            emit('update:modelValue', a.getValue())
        }
    })

    coder.setValue(props.modelValue);
    coder.setOption("mode", props.type)
});

</script>
